<template>
  <div>
    <div>
      <el-card style="margin-bottom: 10px; height: 40px">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <div>
            <div class="verticalBar"></div>
            <span style="color: #1074fd">长尾词生成</span>
          </div>
        </div>
      </el-card>
    </div>

    <el-card>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="" label-width="100px" class="option_div">
          <el-select v-model="tailword.countryKeyword" placeholder="请选择：A">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <span class="add_div">+</span>
        <el-form-item label="" label-width="100px" class="option_div">
          <el-select v-model="tailword.regionKeyword" placeholder="请选择：B">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <span class="add_div">+</span>
        <el-form-item label="" label-width="100px" class="option_div">
          <el-select v-model="tailword.industryKeyword" placeholder="请选择：C">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <span class="add_div">+</span>
        <el-form-item label="" label-width="100px" class="option_div">
          <el-select v-model="tailword.decorateKeyword" placeholder="请选择：D">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" class="option_span">
          <div>
            <span>使用说明：组合顺序可自定义，如</span>
          </div>
          <div>
          <span>A+B;A+B+C;A+B+D;B+C;A+D;A+B+C+D默认为: A + B + C + D</span>
          </div>
        </el-form-item>
        <el-form-item label="" class="option_div">
          <el-button
            type="primary"
            style="width: 100px"
            class="el-button_div"
            @click="generateTailWord();promptBoxShow()"
          >生成
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 10px">
      <div class="container">
        <el-container class="el-container_div">
          <div>
            <el-card style="margin-bottom: 10px">
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                "
              >
                <div>
                  <div class="verticalBar"></div>
                  <span style="color: #1074fd">国家关键字: A<span style="margin-left: 40px; color: red">使用说明：换行记作单词分隔</span></span>
                </div>
              </div>
            </el-card>
          </div>
          <el-main>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="countryKeyword"
              style="height: 160px"
            >
            </el-input>
          </el-main>
          <el-footer>
            <el-select v-model="countryKeywordLeft" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="option_div"
              >
              </el-option>
            </el-select>
            <i class="el-icon-sort" style="cursor: pointer"></i>
            <el-select v-model="countryKeywordRight" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="el-button_div"
                       @click="translate(countryKeyword, extractLang(countryKeywordLeft), extractLang(countryKeywordRight))">
              立即翻译
            </el-button>
          </el-footer>
        </el-container>
        <el-container class="el-container_div">
          <div>
            <el-card style="margin-bottom: 10px">
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                "
              >
                <div>
                  <div class="verticalBar"></div>
                  <span style="color: #1074fd">行业关键字: B<span style="margin-left: 40px; color: red">使用说明：换行记作单词分隔</span></span>
                </div>
              </div>
            </el-card>
          </div>
          <el-main>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="regionKeyword"
              style="height: 160px"
            >
            </el-input>
          </el-main>
          <el-footer>
            <el-select v-model="regionKeywordLeft" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="option_div"
              >
              </el-option>
            </el-select>
            <i class="el-icon-sort" style="cursor: pointer"></i>
            <el-select v-model="regionKeywordRight" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="el-button_div"
                       @click="translate1(regionKeyword, extractLang(regionKeywordLeft), extractLang(regionKeywordRight))">
              立即翻译
            </el-button>
          </el-footer>
        </el-container>
      </div>
      <div class="container">
        <el-container class="el-container_div">
          <div>
            <el-card style="margin-bottom: 10px">
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                "
              >
                <div>
                  <div class="verticalBar"></div>
                  <span style="color: #1074fd">地区关键字: C<span style="margin-left: 40px; color: red">使用说明：换行记作单词分隔</span></span>
                </div>
              </div>
            </el-card>
          </div>
          <el-main>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="industryKeyword"
              style="height: 160px"
            >
            </el-input>
          </el-main>
          <el-footer>
            <el-select v-model="industryKeywordLeft" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="option_div"
              >
              </el-option>
            </el-select>
            <i class="el-icon-sort" style="cursor: pointer"></i>
            <el-select v-model="industryKeywordRight" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="el-button_div"
                       @click="translate2(industryKeyword, extractLang(industryKeywordLeft), extractLang(industryKeywordRight))">
              立即翻译
            </el-button>
          </el-footer>
        </el-container>
        <el-container class="el-container_div">
          <div>
            <el-card style="margin-bottom: 10px">
              <div
                style="
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                "
              >
                <div>
                  <div class="verticalBar"></div>
                  <span style="color: #1074fd">修饰关键字: D<span style="margin-left: 40px; color: red">使用说明：换行记作单词分隔</span></span>
                </div>
              </div>
            </el-card>
          </div>
          <el-main>
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="decorateKeyword"
              style="height: 160px"
            >
            </el-input>
          </el-main>
          <el-footer>
            <el-select v-model="decorateKeywordLeft" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="option_div"
              >
              </el-option>
            </el-select>
            <i class="el-icon-sort" style="cursor: pointer"></i>
            <el-select v-model="decorateKeywordRight" placeholder="语言" style="width: 80px">
              <el-option
                v-for="item in langOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-button type="primary" class="el-button_div"
                       @click="translate3(decorateKeyword, extractLang(decorateKeywordLeft), extractLang(decorateKeywordRight))">
              立即翻译
            </el-button>
          </el-footer>
        </el-container>
      </div>
    </el-card>
    <el-dialog
      :visible.sync="promptBox"
      width="30%"
      style="width: 2000px"
    >
      <div>
        <el-card style="margin-bottom: 10px">
          <div
            style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
          >
            <div>
              <div class="verticalBar"></div>
              <span style="color: #1074fd">长尾词生成</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle_div">
        <span>简介名称：</span>
        <el-input v-model="introduce" placeholder="请输入内容" style="width: 400px"></el-input>
        <div>
          <span>是否启用：</span>
          <template>
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="promptBox = false">取 消</el-button>
        <el-button type="primary" @click="submitTailword"
        >确 定</el-button
        >
      </span>
    </el-dialog>

  </div>
</template>

<script>

import { translateKeyword } from '@/utils/translate'
import video from '@/network/api/video'

export default {
  name: 'index',
  data () {
    return {
      promptBox: false,

      radio: '1',
      tailwordContent: '',
      tailword: {
        countryKeyword: '',
        industryKeyword: '',
        regionKeyword: '',
        decorateKeyword: '',
      },
      countryKeywordLeft: '',
      countryKeywordRight: '',
      regionKeywordLeft: '',
      regionKeywordRight: '',
      industryKeywordLeft: '',
      industryKeywordRight: '',
      decorateKeywordLeft: '',
      decorateKeywordRight: '',
      countryKeyword: '',
      regionKeyword: '',
      industryKeyword: '',
      decorateKeyword: '',
      countryKeywordArr: '',
      regionKeywordArr: '',
      industryKeywordArr: '',
      decorateKeywordArr: '',
      introduce: '',
      langOptions: [
        {
          value: '瑞典语[sv]',
          label: '瑞典语[sv]',
        }, {
          value: '中文[zh-CHS]',
          label: '中文[zh-CHS]',
        }, {
          value: '英语[en]',
          label: '英语[en]',
        }, {
          value: '德语[de]',
          label: '德语[de]',
        }, {
          value: '丹麦语[da]',
          label: '丹麦语[da]',
        },
        {
          value: '西班牙语[es]',
          label: '西班牙语[es]',
        },
        {
          value: '芬兰语[fi]',
          label: '芬兰语[fi]',
        }],
      options: [
        {
          label: '空',
          value: '空',
        },
        {
          label: '国家A',
          value: '国家A',
        },
        {
          label: '地区B',
          value: '地区B',
        },
        {
          label: '行业C',
          value: '行业C',
        },
        {
          label: '修饰词D',
          value: '修饰词D',
        },
      ],
    }
  },
  methods: {
    promptBoxShow () {
      this.promptBox = true
    },
    translate (Keyword, from, to) {
      translateKeyword(Keyword, from, to).then(res => {
        this.countryKeyword = res.translation[0]
      })

    },
    translate1 (Keyword, from, to) {
      translateKeyword(Keyword, from, to).then(res => {
        this.regionKeyword = res.translation[0]
      })

    },
    translate2 (Keyword, from, to) {
      translateKeyword(Keyword, from, to).then(res => {
        this.industryKeyword = res.translation[0]
      })

    },
    translate3 (Keyword, from, to) {
      translateKeyword(Keyword, from, to).then(res => {
        this.decorateKeyword = res.translation[0]
      })

    },
    extractLang (lang) {
      return lang.match(/\[(.*)\]/)[1]
    },
    generateTailWord () {
      console.log(this.tailword['countryKeyword']);
      console.log(this.tailword);
      let res = []
      let tailword = []
      let tailword2 = []
      Object.keys(this.tailword).forEach(key => {
        if (this.tailword[key] !== '空') {
          res.push(key)
        }
      })
      console.log(res);
      res.forEach(val => {
        tailword.push([this[val].split('\n')])
      })
      console.log(tailword);
      for (let item of tailword) {
        // console.log(item[0]);
        tailword2.push(item[0])
      }

      console.log(tailword2);
      // 执行组合排列的函数
      function doExchange(array){
        var len = array.length;
        // 当数组大于等于2个的时候
        if(len >= 2){
            // 第一个数组的长度
            var len1 = array[0].length;
            // 第二个数组的长度
            var len2 = array[1].length;
            // 2个数组产生的组合数
            var lenBoth = len1 * len2;
            //  申明一个新数组,做数据暂存
            var items = new Array(lenBoth);
            // 申明新数组的索引
            var index = 0;
            // 2层嵌套循环,将组合放到新数组中
            for(var i=0; i<len1; i++){
                for(var j=0; j<len2; j++){
                    items[index] = array[0][i] +" #"+ array[1][j];
                    index++;
                }
            }
            // 将新组合的数组并到原数组中
            var newArr = new Array(len -1);
            for(var i=2;i<array.length;i++){
                newArr[i-1] = array[i];
            }
            newArr[0] = items;
            // 执行回调
            return doExchange(newArr);
        }else{
            return array[0];
        }
      }
      //执行
      // console.log(doExchange(tailword2));
      // this.tailwordContent = tailword.join('').toString()
      this.tailwordContent = doExchange(tailword2)

      console.log(this.tailwordContent)
    },
    submitTailword () {
      const info = JSON.parse(localStorage.getItem('updateUserInfo'))
      for (let i = 0; i < this.tailwordContent.length; i++) {
        const data = {
          organId: info.organId + '',
          introduce: this.introduce,
          content: this.tailwordContent[i],
          enabled: this.radio,
        }
        video.submitTail(data)
      }
      // const data = {
      //   organId: info.organId + '',
      //   introduce: this.introduce,
      //   content: this.tailwordContent,
      //   enabled: this.radio,
      // }
      // video.submitTail(data)
      this.$message({
        message:'提交长尾词成功',
        type:'success'
    })
    },
  },
}
</script>

<style scoped>
.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}

.add_div {
  color: #1074fd;
  font-size: 30px;
}

/*.option_div {*/
/*  margin-right: 40px;*/
/*  margin-left: 40px;*/
/*}*/

.option_div:nth-child(1) {
  margin-left: 0;
}

.option_span {
  font-size: 12px;
  color: red;
}

/deep/.el-form-item__content {
  line-height: 20px;
}

.el-form--inline .el-form-item {
  margin-left: 10px;
}

.el-button_div {
  margin-left: 4rem;
}

.container {
  display: flex;
}

.container:nth-child(2) {
  margin-top: 40px;
}

.el-container_div {
  border: 1px solid rgb(161, 160, 160);
  border-radius: 7px;
}

.el-container_div {
  margin-left: 7rem;
  width: 400px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.middle_div {
  padding: 10px 40px 40px 40px;
}

.middle_div div {
  margin-top: 20px;
}

.middle_div span {
  font-weight: 500;
  color: rgb(16, 16, 16);
}

/deep/ .el-textarea__inner {
  height: 160px !important;
}

.el-icon-sort {
  margin-left: 20px;
  margin-right: 20px;
  transform: rotate(90deg);
}

/deep/ .el-dialog__header {
  background-color: white;
  padding: 0;
}

/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-card__body {
  padding: 13px;
}
</style>
